<style scoped lang="less">
  .concat-us{
    position: fixed;
    bottom: 200px;
    right: 30px;
    width: 78px;
    z-index: 5;
    letter-spacing: 1px;
    .way-pic{
      display: block;
    }
    .concat-way{
      text-align: center;
      font-size: 18px;
      li{
        padding-top: 20px;
      }
      li>div{
        cursor: pointer;
      }
    }
    .concat-tel{
      position: absolute;
      left: -300px;
      font-size: 18px;
      top: 240px;
      color: #1189FF;
      span{
        display: inline-block;
        padding-left: 10px;
        transform: translateY(-6px);
        letter-spacing: 1px;
      }
    }
    .cha{
      position: absolute;
      right: -10px;
      cursor: pointer;
      top: 115px;
    }
  }
</style>
<template>
  <div v-show="showConcat" class="concat-us">
    <div @click="showConcat = false" class="cha">
      <img src="../../static/image/sy_16.png">
    </div>
    <div style="padding-bottom: 20px">
      <img class="way-pic" src="../../static/image/qiche.png">
    </div>
    <div class="concat-way">
      <ul>
        <li>
          <div>
            <p>
              <img src="../../static/image/sy_18.png" alt="">
            </p>
            <p>
              客服资讯
            </p>
          </div>
        </li>
        <li>
          <div @click="showTel = !showTel">
            <p>
              <img src="../../static/image/sy_22.png" alt="">
            </p>
            <p>
              电话咨询
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div v-show="showTel" class="concat-tel">
      <img src="../../static/image/sy_23.png">
      <span>
          客服：400-234-3556
        </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ContactUs',
    data () {
      return {
        showConcat: true,
        showTel: false,
        tel: '400-234-3556'
      }
    }
  }
</script>

<style scoped>

</style>
